<template>
  <div class="panel">
    <div class="timebox" id="timebox">{{ date }}</div>
    <my-jg class="my-jg"></my-jg>
    <div class="name">{{ name }}</div>
    <my-out class="my-out"></my-out>
    <my-logo class="my-logo"></my-logo>
    <!-- <my-nav class="my-nav"></my-nav>
    <my-navhorizontal class="my-navhorizontal"></my-navhorizontal> -->
    <div id="cesiumContainer"></div>
    <div class="my-left">
      <L1 class="L-1"></L1>
      <L2 class="L-2"></L2>
      <L3 class="L-3"></L3>
      <L4 class="L-4"></L4>
    </div>
    <div class="my-bottom">

    </div>
    <div class="my-right">

    </div>
  </div>
</template>

<script>
import logo_jg from "@/components/logo/logo_jg";
import logo_out from "@/components/logo/logo_out";
import logo from "@/components/logo/logo";
import nav from "@/components/menu/nav";
import navhorizontal from "@/components/menu/nav-horizontal";
import layerFn from "@/components/menu/LayerFn";
import Property from "@/components/menu/Property";
import L1 from "@/components/Left/L1";
import L2 from "@/components/Left/L2";
import L3 from "@/components/Left/L3";
import L4 from "@/components/Left/L4";

export default {
  name: "viewer",
  components: {
    "my-logo": logo,
    "my-jg": logo_jg,
    "my-out": logo_out,
    "my-nav": nav,
    "my-navhorizontal": navhorizontal,
    "L1": L1,
    "L2": L2,
    "L3": L3,
    "L4": L4
  },
  data() {
    return {
      date: "",
      name: "崇礼分局",
    };
  },
  created() {
    this.showtime();
  },
  mounted() {
    this.$nextTick(function () {
      let tree = "";
      let option = "./static/IMG/cesium/earth.jpg";
      debugger;
      window.sgworld = new SmartEarth.SGWorld(
        "cesiumContainer",
        Cesium,
        option,
        tree,
        function () {
          sgworld.Navigate.jumpTo({
            //跳转视角
            destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000),
          });
        }
      );
    });
  },
  methods: {
    showtime: function () {
      setInterval(() => {
        let today = new Date();
        let year = today.getFullYear();
        let month = today.getMonth() + 1;
        let day = today.getDate();
        let h = today.getHours();
        let m = this.checkTime(today.getMinutes());
        let s = this.checkTime(today.getSeconds());
        this.date =
          year + "年" + month + "月" + day + "日  " + h + ":" + m + ":" + s;
      }, 500);
    },
    checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    },
  },
};
</script>

<style scoped>
.timebox {
  color: #ffffff;
  position: absolute;
  left: 2%;
  top: 1px;
  /*background: url('image/index/bodyBg.png') repeat-x;*/
  font-size: 18px;
  font-weight: bold;
  z-index: 1000;
}
.my-logo {
  position: absolute;
  left: 50%;
  top: 0px;
  transform: translate(-50%, 0); /* 50%为自身尺寸的一半 */
  /*position: absolute; !*绝对定位*!*/
  /*width: 500px;!*必须得有宽度*!*/
  /*margin:  auto; !*水平居中*!*/
  /*left: 0; !*此处不能省略，且为0*!*/
  /*right: 0; !*此处不能省略，且为0*!*/
  z-index: 99;
}
.my-jg {
  position: absolute;
  top: 0px;
  right: 120px;
  /* transform: translate(-50%, 0);   50%为自身尺寸的一半 */
  z-index: 100;
}
.name {
  color: white;
  position: absolute;
  top: 5px;
  right: 50px;
  z-index: 100;
}
.my-out {
  position: absolute;
  top: 0px;
  right: 10px;
  /* transform: translate(-50%, 0);   50%为自身尺寸的一半 */
  z-index: 100;
}
.my-nav {
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 99;
  width: 100px;
  display: none;
}
.my-navhorizontal {
  z-index: 98;
}
.btn-layer {
  position: fixed;
  left: 10px;
  top: 200px;
  z-index: 99;
  background: url(../../static/IMG/leftsider/icon/左边上_03.png) no-repeat;
  width: 52px;
  height: 124px;
  cursor: pointer;
}
.hover_btn_layer:hover {
  color: white;
  font-weight: bolder;
}
.hover_btn-fnc:hover {
  color: white;
  font-weight: bolder;
}
.hover_btn-pro:hover {
  color: white;
  font-weight: bolder;
}
.hover_btn-result:hover {
  color: white;
  font-weight: bolder;
}
.btn-fnc {
  position: fixed;
  left: 10px;
  top: 325px;
  z-index: 99;
  background: url(../../static/IMG/leftsider/icon/左边下_02.png) no-repeat;
  width: 52px;
  height: 160px;
  cursor: pointer;
}
.btn-pro {
  position: fixed;
  left: 10px;
  top: 490px;
  z-index: 99;
  background: url(../../static/IMG/leftsider/icon/左边上_03.png) no-repeat;
  width: 52px;
  height: 124px;
  background-size: 100% 100%;
  text-align: center;
  cursor: pointer;
}
.btn-result {
  position: fixed;
  left: 10px;
  top: 625px;
  z-index: 99;
  background: url(../../static/IMG/leftsider/icon/左边上_03.png) no-repeat;
  width: 52px;
  height: 124px;
  background-size: 100% 100%;
  text-align: center;
  cursor: pointer;
}
.panel {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
/*.mybtntable{*/
/*position: absolute;*/
/*}*/
@media screen and (max-width: 500px) {
  .my-navhorizontal {
    display: none;
  }
  .btn-layer,
  .btn-fnc,
  .btn-pro,
  .btn-result {
    display: none;
  }
  .my-nav {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 99;
    width: 100px;
    height: 100px;
    display: block;
  }
}

.my-left {
  width: 22%;
  position: absolute;
  background: url(../../static/IMG/bodyBg.png) no-repeat;
  background-size: 100% 100%;
  top: 116px;
  left: 0px;
  bottom: 0px;
}

.my-right {
  width: 22%;
  position: absolute;
  background: url(../../static/IMG/bodyBg.png) no-repeat;
  background-size: 100% 100%;
  top: 116px;
  right: 0px;
  bottom: 0px;
}

.my-bottom {
  position: absolute;
  width: 56%;
  bottom: 0px;
  right: 22%;
  left: 22%;
  background-size: 100% 100%;
  height: 300px;
  background: url(../../static/IMG/bodyBg.png) no-repeat;
  justify-content: center;
  align-items: center;
}

.L-1 {
  background: url(../../static/IMG/border.png) no-repeat;
  box-sizing: border-box;
  position: absolute;
  background-size:100% 100%;
  width: 660px;
  height: 400px;
  top: 20px;
}

.L-2 {
  background: url(../../static/IMG/border.png) no-repeat;
  box-sizing: border-box;
  position: absolute;
  background-size:100% 100%;
  width: 660px;
  height: 300px;
  top: 410px;
}

.L-3 {
  background: url(../../static/IMG/border.png) no-repeat;
  box-sizing: border-box;
  position: absolute;
  background-size:100% 100%;
  width: 660px;
  height: 300px;
  bottom: 320px;
}

.L-4 {
  background: url(../../static/IMG/border.png) no-repeat;
  box-sizing: border-box;
  position: absolute;
  background-size:100% 100%;
  width: 660px;
  height: 300px;
  bottom: 20px;
}
</style>
